import { CSSProperties, FC, useEffect, useState } from 'react';

interface Iprops {
  number: number | string;
  style?: CSSProperties;
}
const NumberItem: FC<Iprops> = (props) => {
  const { number = 0, style } = props;
  const [up, setUp] = useState<number>(0);
  useEffect(() => {
    const num = typeof number === 'number' ? number : parseInt(number);
    setUp(num);
  }, [number]);
  return (
    <div
      style={{
        ...style,
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        padding: '0',
        lineHeight: '1em',
        transition: 'transform .3s linear 0s',
        transform: `translateY(-${up * 10}%)`,
      }}
    >
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  );
};

export default NumberItem;
